<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>频道栏目列表</span>
        <el-button type="primary" size="mini" @click="handleCreateChannel">
          <el-icon>
            <plus />
          </el-icon>
          添加频道
        </el-button>
      </div>
    </template>
    <el-table
            ref="channelTableRef"
            :data="tableData.listData"
            v-loading="isloading"
            style="width: 100%"
            :highlight-current-row="true"
            @row-click="handleClickChannel"
            :expand-row-keys="expandRowKeys"
            :row-key="getRowKeys"
            max-height="400"
    >
      <el-table-column type="expand" @click.stop width="30">
        <template #default="{row}" class="expandtable">
          <el-table
                  :data="row.columnList"
                  :show-header="false"
                  :highlight-current-row="true"
                  @row-click="handleClickColumn"
                  :ref="el => { if (el) columnTableRef[row.channelid] = el }"

          >
            <el-table-column width="30"></el-table-column>
            <el-table-column show-overflow-tooltip width="120">
              <template #default="{row}">
                {{row.name}}
              </template>
            </el-table-column>
            <el-table-column prop="sort" width="80" align="middle"/>
            <el-table-column >
              <template #default="{row}">
                <el-button type="text" size="mini" :disabled="row.corpid != currentCorpid" @click.stop="handleUpdateColumn(row)">编辑</el-button>
                <el-button type="text" size="mini" :style="{color: row.corpid == currentCorpid ? 'red' : ''}" :disabled="row.corpid != currentCorpid" @click.stop="handleDeleteColumn(row)">删除</el-button>
              </template>
            </el-table-column>
            <template #empty style="height: 0">
              <span></span>
            </template>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" show-overflow-tooltip/>
      <el-table-column label="排序" prop="sort"/>
      <el-table-column label="操作" width="150">
        <template #default="{row}">
          <el-button type="text" size="mini" :disabled="row.corpid != currentCorpid" @click.stop="handleUpdateChannel(row)">
            编辑
          </el-button>
          <el-button type="text" size="mini" :style="{color: row.corpid == currentCorpid ? 'red' : ''}" :disabled="row.corpid != currentCorpid" @click.stop="handleDeleteChannel(row)">删除</el-button>
          <el-button type="text" size="mini" @click.stop="handleCreateChannelColumn(row)">
            添加栏目
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <create-channel
          ref="createChannelRef"
          :dialog-visible="createChannelDialogVisible"
          :dialog-status="createChannelDialogStatus"
          :dialog-form-data="createChannelFormData"
          @handleChannelDialog="handleChannelDialog"
          @reloadData="getChannelList"
  />
  <create-column
          ref="createColumnRef"
          :dialog-column-form-data="createColumnDialogFormData"
          :dialog-column-status="createColumnDialogStatus"
          :dialog-column-visible="createColumnDialogVisible"
          @handleCancelColumnDialog="handleCancelColumnDialog"
          @reloadData="getChannelList"
  />
</template>

<script>
  import {ref, toRef, reactive, nextTick} from 'vue'
  import {Plus} from '@element-plus/icons'
  import {
    getPackageChannels,
    getPackageChannelColumns,
    deletePackageChannel,
    deletePackageChannelColumn
  } from "@/api/package/package";
  import CreateChannel from "../channel/components/CreateChannel";
  import CreateColumn from "../channel/components/CreateColumn";
  import {ElMessage, ElMessageBox} from 'element-plus'

  export default {
    name: "ChannelColumn",
    components: {Plus, CreateChannel, CreateColumn},
    props: {
      channelColumnConfig: {
        type: Object,
        default() {
          return {
            channelid: undefined,
            channelName: undefined,
            columnid: undefined,
            columnName: undefined,
            columnSelected: false
          }
        }
      },
      query: {
        type: Object,
        default() {
          return {
            packageid: undefined
          }
        }
      },
      currentCorpid: {
        type: Number,
        required: true
      }
    },
    emits: ['getMediaList'],
    setup(props, context) {
      const channelColumnObj = toRef(props, 'channelColumnConfig')
      const isloading = ref(false)
      const queryList = reactive({
        page: 1,
        pagesize: 1000,
        packageid: undefined,
        ifext: 1
      })
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const columnTableRef = ref([])
      const expandRowKeys = ref([])
      const channelTableRef = ref(null)
      /** 新建频道相关参数开始 **/
      const createChannelDialogVisible = ref(false)
      const createChannelDialogStatus = ref('create')
      const createChannelFormData = reactive({
        channelid: undefined,
        packageid: undefined,
        name: '',
        sort: 1,
        ifext: 1
      })
      const createChannelRef = ref(null)
      /** 新建频道相关参数结束 **/
      /** 新建栏目相关参数开始 **/
      const createColumnDialogVisible = ref(false)
      const createColumnDialogStatus = ref('create')
      const createColumnDialogFormData = reactive({
        channelid: undefined,
        columnid: undefined,
        packageid: undefined,
        name: '',
        sort: 1,
        ifext: 1
      })
      const createColumnRef = ref(null)
      /** 新建栏目相关参数结束 **/

      /** 获取频道列表 **/
      const getChannelList = () => {
        queryList.packageid = props.query.packageid
        getPackageChannels(queryList).then(response => {
          if (response.errcode == 0) {
            const {total, list} = response.data
            tableData.total = total
            tableData.listData = list
            tableData.listData.forEach(row => {
              getColumnList(row)
            })
            if (tableData.listData.length > 0) {
              channelColumnObj.value.channelid = list[0].channelid
              channelColumnObj.value.channelName = list[0].name
              channelColumnObj.value.columnid = undefined
              expandRowKeys.value = [list[0].channelid]
              channelTableRef.value.setCurrentRow(tableData.listData[0])
              nextTick(() => {
                getMediaList()
              })
            }
          }
        })
      }
      /** 获取媒资列表 **/
      const getMediaList = () => {
        context.emit('getMediaList')
      }
      /** 获取栏目列表 **/
      const getColumnList = (row) => {
        getPackageChannelColumns({ifext: 1, packageid: props.query.packageid, channelid: row.channelid, page: 1, pagesize: 10000}).then(response => {
          if (response.errcode == 0) {
            row.columnList = response.data.list
          }
        })
      }
      /** 点击频道行选择 **/
      const handleClickChannel = (row) => {
        channelColumnObj.value.channelid = row.channelid
        channelColumnObj.value.channelName = row.name
        channelColumnObj.value.columnid = undefined
        channelColumnObj.value.columnName = undefined
        channelColumnObj.value.columnSelected = false
        nextTick(() => {
          columnTableRef.value.forEach(ref => {
            ref.setCurrentRow()
          })
          getMediaList()
        })
      }
      /** 获取table的rowkey **/
      const getRowKeys = (row) => {
        return row.channelid
      }
      /** 点击栏目选择事件 **/
      const handleClickColumn = (row) => {
        channelColumnObj.value.channelid = row.channelid
        channelColumnObj.value.channelName = undefined
        channelColumnObj.value.columnid = row.columnid
        channelColumnObj.value.columnName = row.name
        channelColumnObj.value.columnSelected = true
        tableData.listData.forEach(channel => {
          if (channel.channelid == row.channelid) {
            channelColumnObj.value.channelName = channel.name
          }
        })
        nextTick(() => {
          channelTableRef.value.setCurrentRow()
          columnTableRef.value.forEach((ref, channelid) => {
            if (channelid == row.channelid) {
              ref.setCurrentRow(row)
            } else {
              ref.setCurrentRow()
            }
          })
          getMediaList()
        })

      }
      /** 编辑栏目 **/
      const handleUpdateColumn = (row) => {
        createColumnDialogFormData.channelid = row.channelid
        createColumnDialogFormData.columnid = row.columnid
        createColumnDialogFormData.name = row.name
        createColumnDialogFormData.sort = 1
        createColumnDialogStatus.value = 'update'
        createColumnDialogVisible.value = true
        nextTick(() => {
          createColumnRef.value.columnFormDataRef.clearValidate()
        })
      }
      /** 删除栏目 **/
      const handleDeleteColumn = (row) => {
        ElMessageBox.confirm('确定要删除栏目 ' + row.name + ' 吗？', '删除栏目', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          deletePackageChannelColumn({columnid: row.columnid, ifext: 1}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getChannelList()
            }
          })
        }).catch(() => {})
      }
      /** 关闭新建频道弹框 **/
      const handleChannelDialog = () => {
        createChannelDialogVisible.value = false
      }
      /** 新建频道 **/
      const handleCreateChannel = () => {
        createChannelFormData.channelid = undefined
        createChannelFormData.packageid = parseInt(props.query.packageid)
        createChannelFormData.name = ''
        createChannelFormData.sort = 1
        createChannelDialogStatus.value = 'create'
        createChannelDialogVisible.value = true
        nextTick(() => {
          createChannelRef.value.channelFormRef.clearValidate()
        })
      }
      /** 编辑频道 **/
      const handleUpdateChannel = (row) => {
        createChannelFormData.channelid = row.channelid
        createChannelFormData.packageid = row.packageid
        createChannelFormData.name = row.name
        createChannelFormData.sort = row.sort
        createChannelDialogStatus.value = 'update'
        createChannelDialogVisible.value = true
        nextTick(() => {
          createChannelRef.value.channelFormRef.clearValidate()
        })
      }
      /** 删除频道 **/
      const handleDeleteChannel = (row) => {
        ElMessageBox.confirm('确定要删除频道 ' + row.name + ' 吗？', '删除频道', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          deletePackageChannel({channelid: row.channelid, ifext: 1}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getChannelList()
            }
          })
        }).catch(() => {})
      }
      /** 新建栏目 **/
      const handleCreateChannelColumn = (row) => {
        createColumnDialogFormData.channelid = row.channelid
        createColumnDialogFormData.packageid = parseInt(props.query.packageid)
        createColumnDialogFormData.name = ''
        createColumnDialogFormData.sort = 1
        createColumnDialogFormData.columnid = undefined
        createColumnDialogStatus.value = 'create'
        createColumnDialogVisible.value = true
        nextTick(() => {
          createColumnRef.value.columnFormDataRef.clearValidate()
        })
      }
      /** 关闭新建栏目弹框 **/
      const handleCancelColumnDialog = () => {
        createColumnDialogVisible.value = false
      }

      const init = () => {
        getChannelList()
      }

      return {
        init,
        channelColumnObj,
        isloading,
        tableData,
        handleClickChannel,
        getRowKeys,
        handleClickColumn,
        columnTableRef,
        handleUpdateColumn,
        handleDeleteColumn,
        expandRowKeys,
        channelTableRef,
        createChannelDialogStatus,
        createChannelDialogVisible,
        createChannelFormData,
        handleChannelDialog,
        getChannelList,
        handleCreateChannel,
        createChannelRef,
        handleCreateChannelColumn,
        createColumnDialogFormData,
        createColumnDialogStatus,
        createColumnDialogVisible,
        handleCancelColumnDialog,
        createColumnRef,
        handleUpdateChannel,
        handleDeleteChannel
      }
    }
  }
</script>

<style scoped>

</style>
